<template>
    <div id="mySelect" :class="isAll ? 'isAll' : ''">
        <el-select v-model="searchSelectArr" multiple filterable placeholder="请选择" @change="selectChange"
            popper-class="cheng">
            <el-option v-for="item in selectOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    name: "mySelect",
    data() {
        return {
            searchSelect: [], // 下拉选择框中的内容
            oldSearchSelect: [], // 原来的下拉框中的内容
            selectOption: [

            ],
            isAll: false, // 是不是全选中了
        };
    },
    props: {
        option: { // 传输过来的数组
            type: Array,
            default: () => {
                return [];
            },
        },
        searchSelectArr: { // 已选
            type: Array,
            default: () => {
                return [];
            },
        },
        label: { // 做一个字典，显示的值
            type: String,
            default: "label"
        },
        value: { // 做一个字典，实际的值
            type: String,
            default: "value"
        }
    },
    watch: {
        option() {
            if (this.option.length != 0 && this.value in this.option[0] && this.label in this.option[0]) {
                this.selectOption.push({
                    value: "all",
                    label: "全部"
                });
                console.log(798789, this.option);
                this.option.map(item => {
                    this.selectOption.push({
                        value: item[this.value],
                        label: item[this.label]
                    })
                })
                this.selectOption.map(item => {
                    // this.searchSelect.push(item.value);
                    this.oldSearchSelect.push(item.value);
                })
            }
        },
        // 

        searchSelectArr: {
            handler(newVal) {
                if (newVal) {
                    console.log(newVal);
                    this.searchSelect = newVal

                }
            },
            immediate: true
        },
    },
    mounted() {
        // console.log(this.opeion);
    },
    components: {},
    computed: {},
    methods: {

        // 下拉框选择
        selectChange() {
            // console.log(this.searchSelect);
            let oldIndexOfValue = this.oldSearchSelect.indexOf("all");
            let indexOfValue = this.searchSelect.indexOf("all");
            if (oldIndexOfValue != -1 && indexOfValue != -1) { // 两个都有ALL,则表示只是去掉了莫一项
                this.searchSelect.splice(indexOfValue, 1);
                this.isAll = false;
                this.saveNewSearchSelect();
            } else if (oldIndexOfValue == -1 && indexOfValue != -1) { // 老数据没有all，新的有的，表明需要全选
                this.searchSelect.splice(0);
                this.oldSearchSelect.splice(0);
                this.isAll = true;
                this.selectOption.map(item => {
                    this.searchSelect.push(item.value);
                    this.oldSearchSelect.push(item.value);
                })
            } else if (oldIndexOfValue != -1 && indexOfValue == -1) { // 老数据有all，但是新的数据没有all，表明需要全不选
                this.searchSelect.splice(0);
                this.oldSearchSelect.splice(0);
                this.isAll = false;
            } else if (oldIndexOfValue == -1 && indexOfValue == -1) { // 两个都没有ALL,表示只是选择了一下，需要判断是不是都选上
                // let isAllSelected = false;
                let allOption = [];
                this.selectOption.map(item => {
                    if (item.value != "all") {
                        allOption.push(item.value);
                    }
                })
                if (allOption.length == this.searchSelect.length) {
                    this.isAll = true;
                    // this.searchSelect.push("all");
                    this.searchSelect.splice(0, 0, "all")
                    this.saveNewSearchSelect();
                }

                this.$emit("searchSelectArr", this.searchSelect)
            }
        },
        // 保存原来的数据
        saveNewSearchSelect() {
            this.oldSearchSelect.splice(0);
            this.searchSelect.map(item => {
                this.oldSearchSelect.push(item);
            })
        },
    }
};
</script>
<style lang="less">
.el-select__tags {
    height: 26px;
    overflow: hidden;

    // text-overflow: ellipsis;
    &>span {
        white-space: nowrap;
        overflow: hidden;
        display: block;
    }
}

/deep/.el-select .el-select__tags>span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block !important;
    display: flex;
    // width: 70%;
    max-width: 90%;
}

.el-tag.el-tag--info .el-tag__close {
    display: none;
}

.isAll {
    .el-select .el-select__tags>span {
        span:nth-child(n+2) {
            display: none;
        }
    }
}
</style>